const path = require('path')
//导入首页预览插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',//使用该html模板
    filename: 'index.html'//生成文件一般也叫index.html 该文件在内存中 根目录下看不到
})
//导入vue单组件loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')



module.exports = {
    //编译模式
    mode: 'development',//development production

    //默认情况下 webpack会去找index.js入口文件 输入默认文件夹dist下的main.js
    //下面我们可以配置指定的入口文件和输出的路径以及输出文件名称

    entry: path.join(__dirname, './src/index.js'),//入口文件

    output: {
        path: path.join(__dirname, './dist'),//输出目录
        filename: 'bundel.js' //输出文件的名称development       
    },
    //在这里注册插件
    plugins: [htmlPlugin, new VueLoaderPlugin()],

    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            //limit=4415意思是小于4415字节的图片会被转成base64 
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=4415' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }

}